<template>
  <div class="permissions-page">
    <el-card>
      <template #header>
        <div class="page-header">
          <h3>权限管理</h3>
        </div>
      </template>

      <el-tree
        :data="permissionTree"
        :props="treeProps"
        show-checkbox
        node-key="id"
        :default-expand-all="true"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const treeProps = {
  children: 'children',
  label: 'label'
}

const permissionTree = ref([
  {
    id: 'system',
    label: '系统管理',
    children: [
      { id: 'user:view', label: '用户查看' },
      { id: 'user:create', label: '用户创建' },
      { id: 'user:edit', label: '用户编辑' },
      { id: 'user:delete', label: '用户删除' },
      { id: 'role:view', label: '角色查看' },
      { id: 'role:create', label: '角色创建' },
      { id: 'role:edit', label: '角色编辑' },
      { id: 'role:delete', label: '角色删除' }
    ]
  },
  {
    id: 'inventory',
    label: '库存管理',
    children: [
      { id: 'inventory:view', label: '库存查看' },
      { id: 'inventory:create', label: '库存创建' },
      { id: 'inventory:edit', label: '库存编辑' },
      { id: 'inventory:delete', label: '库存删除' }
    ]
  },
  {
    id: 'sales',
    label: '销售管理',
    children: [
      { id: 'sales:view', label: '销售查看' },
      { id: 'sales:create', label: '销售创建' },
      { id: 'sales:edit', label: '销售编辑' },
      { id: 'sales:delete', label: '销售删除' }
    ]
  },
  {
    id: 'finance',
    label: '财务管理',
    children: [
      { id: 'finance:view', label: '财务查看' },
      { id: 'finance:create', label: '财务创建' },
      { id: 'finance:edit', label: '财务编辑' },
      { id: 'finance:delete', label: '财务删除' }
    ]
  }
])
</script>

<style scoped>
.permissions-page {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h3 {
  margin: 0;
  color: #303133;
}
</style>
